<template>
  <div class="card">
    <div style="padding-top:2vh;">
      <van-collapse v-model="activeNames" accordion>
        <van-collapse-item v-for="item in jsondata.head" :key="item.grouptitle" :title="item.grouptitle">
          <div v-for="itemdata in item.groupvalue" :key="itemdata.ID">
            <template v-if="itemdata.sUIType == 'file'">
              <div style="color:#323233;font-size:14px;line-height:24px;padding:5px;">{{ itemdata.sTitle }}</div>
              <a v-for="filevalue in itemdata.valuelist" :key="filevalue.url" :href="filevalue.url">{{ filevalue.file.name }}</a>
            </template>
            <template v-else-if="itemdata.sUIType == 'picture'">
              <div style="color:#323233;font-size:14px;line-height:24px;padding:5px;">{{ itemdata.sTitle }}</div>
              <van-uploader v-model="itemdata.valuelist" disabled deletable>
              </van-uploader>
            </template>
            <template v-else>
              <van-cell class="cellvalue1" :title="itemdata.sTitle">
                <template #default>
                  <span class="valueleft" v-html="itemdata.value"></span>
                </template>
              </van-cell>
            </template>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
    <div style="padding-top:2vh;padding-bottom:2vh;">
      <van-tabs @click="openRel">
        <van-tab v-for="rel in jsondata.relevant" :key="rel.ui_key" :title="rel.title" :name="rel.ui_key">
          <van-list v-model="loading" :finished="finished" finished-text="已加载全部数据" @load="onLoad(rel)">
            <div v-for="item in rellist" :key="item.id">
              <template v-if="rel.current_object == 'flowclmx' || rel.current_object == 'flowrecord'">
                <van-cell :title="item.title" :value="item.value" :label="item.label"></van-cell>
              </template>
              <template v-else>
                <van-cell :value="item.value" @click="openRelCard(rel, item)">
                  <template #title>
                    <span>{{ item.title }}</span><br>
                    <span style="font-size: 12px;color: #969799;" v-html="item.label"></span>
                  </template>
                </van-cell>
              </template>
            </div>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
    <div style="margin-bottom:10vh;">
      <van-steps direction="vertical" :active="0">
        <van-step v-for="(item, index) in jsondata.history" :key="index">
          <h3 style="margin:0;font-weight:normal;font-size:inherit;">{{ item.user }} | {{ item.status }}</h3>
          <p>{{ item.operationtime }} | {{ item.opinion }}</p>
        </van-step>
      </van-steps>
    </div>
    <van-popup v-model="relcardshow" position="right" closeable style="width:80vw;">
      <div style="padding-top:5vh;">
        <van-collapse v-model="relactiveNames">
          <van-collapse-item v-for="item in reldata.Details" :key="item.groupStitle" :name="item.groupStitle" :title="item.groupStitle">
            <van-cell v-for="fieldvalue in item.groupvalue" :key="fieldvalue.id" :title="fieldvalue.sTitle" :value="fieldvalue.value"></van-cell>
          </van-collapse-item>
        </van-collapse>
      </div>
    </van-popup>
    <van-popup v-model="optionshow" style="width:80vw;">
      <van-panel title="审批意见">
        <div>
          <van-field v-model="opinion" rows="1" autosize label="意见" type="textarea" placeholder="请输入" />
        </div>
        <div slot="footer" style="text-align:right;">
          <van-button size="small" @click="execFlow">确认</van-button>
        </div>
      </van-panel>
    </van-popup>
    <van-popup v-model="turndoneshow" style="width:80vw;">
      <van-panel title="审批意见">
        <div>
          <input type="hidden" v-model="clr_id" />
          <van-field v-model="clr" label="处理人" type="text" @click="openRef" />
          <van-field v-model="opinion" rows="1" autosize label="意见" type="textarea" placeholder="请输入" />
        </div>
        <div slot="footer" style="text-align:right;">
          <van-button size="small" @click="execFlow">确认</van-button>
        </div>
      </van-panel>
    </van-popup>
    <van-tabbar v-model="active" safe-area-inset-bottom>
      <van-tabbar-item v-show="actiontype === 'mytask' && actioncode === 'unhandle'" @click="openOpinion('agree')">同意</van-tabbar-item>
      <van-tabbar-item v-show="actiontype === 'mytask' && actioncode === 'unhandle'" @click="openOpinion('turndone')">转办</van-tabbar-item>
      <van-tabbar-item v-show="actiontype === 'mytask' && actioncode === 'unhandle'" @click="openOpinion('sendback')">退回</van-tabbar-item>
      <van-tabbar-item v-show="actiontype === 'mytask' && actioncode === 'unhandle'" @click="openOpinion('veto')">否决</van-tabbar-item>
      <van-tabbar-item v-show="actiontype === 'mysend' && actioncode === 'unhandle'" @click="submit">提交</van-tabbar-item>
      <van-tabbar-item v-show="(actiontype === 'mytask' || actiontype === 'mysend') && actioncode === 'handle'" @click="back">取回</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Vue from 'vue'
import { Search, List, Cell, PullRefresh, Toast, Tabbar, TabbarItem, Popup, DatetimePicker, ActionSheet, Tab, Tabs, Collapse, CollapseItem, Dialog, Step, Steps } from 'vant'
import qs from 'qs'
Vue.use(Search).use(List).use(Cell).use(PullRefresh).use(Toast).use(Tabbar).use(TabbarItem).use(Popup).use(DatetimePicker).use(ActionSheet).use(Tab).use(Tabs).use(Collapse).use(CollapseItem).use(Dialog).use(Step).use(Steps)
export default {
  name: 'flowcard',
  data () {
    return {
      idobject: this.$route.query.idobject,
      actiontype: this.$route.query.actiontype,
      actioncode: this.$route.query.actioncode,
      idbill: this.$route.query.idbill,
      idflow: this.$route.query.idflow,
      jsondata: {},
      index: 0,
      active: 0,
      activeNames: 0,
      optionshow: false,
      turndoneshow: false,
      cardoperation: '',
      opinion: '',
      clr_id: '',
      clr: '',
      loading: false,
      finished: false,
      rellist: [],
      startline: 1,
      pagecount: 20,
      relcardshow: false,
      reldata: {},
      relactiveNames: [],
      isDisable: false
    }
  },
  created: function () {
    let data = { idbill: this.idbill, idflow: this.$route.query.idflow, idobject: this.$route.query.idobject }
    this.axios({
      method: 'post',
      url: '/api/flowclmx.check.do',
      data: qs.stringify(data)
    }).then(res => {
      //console.log(res)
      if (res.data.flag === '1') {
        Toast(res.data.des)
        if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
          this.loginout()
        }
      } else {
        this.jsondata = res.data.jsondata
      }
    }).catch(res => {
      this.reserror(res)
    })
  },
  methods: {
    openOpinion (operation) {
      if (operation === 'agree') {
        this.optionshow = true
      } else if (operation === 'turndone') {
        this.turndoneshow = true
      } else if (operation === 'sendback') {
        this.optionshow = true
      } else if (operation === 'veto') {
        this.optionshow = true
      }
      this.cardoperation = operation
    },
    execFlow () {
      if (this.cardoperation === 'agree') {
        this.agree()
      } else if (this.cardoperation === 'turndone') {
        this.turndone()
      } else if (this.cardoperation === 'sendback') {
        this.sendback()
      } else if (this.cardoperation === 'veto') {
        this.veto()
      }
    },
    openRef () {
      this.$router.push({
        name: 'ref',
        params: {
          bo: 'employee',
          tobo: 'flowclmx',
          field: 'clr',
          fieldref: 'sname',
          viewid: '13002637001710527179865071935319',
          conditionVal: '',
          conditionValHidden: '',
          classname: ''
        }
      })
    },
    agree () {
      if (!this.isDisable) {
        this.isDisable = true
        let data = { opinion: this.opinion, 'idflow': this.idflow }
        this.axios({
          method: 'post',
          url: '/api/flowclmx.agree.do',
          data: qs.stringify(data)
        }).then(res => {
          //console.log(res)
          Toast(res.data.des)
          if (res.data.flag === '1') {
            if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
              this.loginout()
            }
          }
          this.isDisable = false
          this.$router.push({ name: 'flowlist', query: { idobject: 'flowclmx', actiontype: this.actiontype, actioncode: this.actioncode } })
        }).catch(res => {
          this.isDisable = false
          //console.log(res)
          Toast(res)
        })
      }
    },
    turndone () {
      if (!this.isDisable) {
        this.isDisable = true
        let data = { idobject: this.idobject, idbill: this.idbill, opinion: this.opinion, 'batchoperation': this.$route.query.idflow, clrid: this.clr_id, clr: this.clr }
        this.axios({
          method: 'post',
          url: '/api/flowclmx.turndone.do',
          data: qs.stringify(data)
        }).then(res => {
          //console.log(res)
          Toast(res.data.des)
          if (res.data.flag === '1') {
            if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
              this.loginout()
            }
          }
          this.isDisable = false
          this.$router.push({ name: 'flowlist', query: { idobject: 'flowclmx', actiontype: this.actiontype, actioncode: this.actioncode } })
        }).catch(res => {
          this.isDisable = false
          //console.log(res)
          Toast(res)
        })
      }
    },
    sendback () {
      if (!this.isDisable) {
        this.isDisable = true
        let data = { opinion: this.opinion, 'batchoperation': this.$route.query.idflow }
        this.axios({
          method: 'post',
          url: '/api/flowclmx.batsendback.do',
          data: qs.stringify(data)
        }).then(res => {
          //console.log(res)
          Toast(res.data.des)
          if (res.data.flag === '1') {
            if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
              this.loginout()
            }
          }
          this.isDisable = false
          this.$router.push({ name: 'flowlist', query: { idobject: 'flowclmx', actiontype: this.actiontype, actioncode: this.actioncode } })
        }).catch(res => {
          this.isDisable = false
          //console.log(res)
          Toast(res)
        })
      }
    },
    veto () {
      if (!this.isDisable) {
        this.isDisable = true
        let data = { idobject: this.idobject, opinion: this.opinion, 'idflow': this.$route.query.idflow }
        this.axios({
          method: 'post',
          url: '/api/flowclmx.veto.do',
          data: qs.stringify(data)
        }).then(res => {
          //console.log(res)
          Toast(res.data.des)
          if (res.data.flag === '1') {
            if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
              this.loginout()
            }
          }
          this.isDisable = false
          this.$router.push({ name: 'flowlist', query: { idobject: 'flowclmx', actiontype: this.actiontype, actioncode: this.actioncode } })
        }).catch(res => {
          this.isDisable = false
          //console.log(res)
          Toast(res)
        })
      }
    },
    submit () {
      if (!this.isDisable) {
        this.isDisable = true
        let data = { id: this.idbill, idflow: this.idflow, idobject: this.idobject }
        this.axios({
          method: 'post',
          url: '/api/flowclmx.submit.do',
          data: qs.stringify(data)
        }).then(res => {
          //console.log(res)
          Toast(res.data.jsondata)
          this.isDisable = false
          this.$router.push({ name: 'flowlist', query: { idobject: 'flowclmx', actiontype: this.actiontype, actioncode: this.actioncode } })
        }).catch(res => {
          this.isDisable = false
          //console.log(res)
        })
      }
    },
    back () {
      if (!this.isDisable) {
        this.isDisable = true
        let data = { id: this.idbill, idflow: this.idflow, idobject: this.idobject }
        this.axios({
          method: 'post',
          url: '/api/flowclmx.back.do',
          data: qs.stringify(data)
        }).then(res => {
          //console.log(res)
          Toast(res.data.jsondata)
          this.isDisable = false
          this.$router.push({ name: 'flowlist', query: { idobject: 'flowclmx', actiontype: this.actiontype, actioncode: this.actioncode } })
        }).catch(res => {
          this.isDisable = false
          //console.log(res)
        })
      }
    },
    onLoad (rel) {
      let data = {
        'startline': this.startline,
        'pagecount': this.pagecount,
        'relfield': rel.relfield,
        'relvalue': this.idbill
      }
      let url = ''
      if (rel.current_object === 'flowclmx') {
        url = '/api/' + rel.current_object + '.list-rel.do'
      } else {
        url = '/api/' + rel.current_object + '.list.do'
      }
      this.axios({
        method: 'post',
        url: url,
        data: qs.stringify(data)
      }).then(res => {
        //console.log(res)
        if (res.data.flag === '1') {
          Toast(res.data.des)
          if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
            this.loginout()
          }
        } else {
          let rsdata = res.data.jsondata.fieldValue
          for (let i = 0; i < rsdata.length; i++) {
            this.rellist.push(rsdata[i])
          }
          if (rsdata == null || rsdata.length === 0 || rsdata.length < this.pagecount) {
            this.loading = false
            this.finished = true
          } else {
            this.startline = this.startline + rsdata.length
            this.loading = false
          }
        }
      }).catch(res => {
        this.reserror(res)
      })
    },
    openRel (name, title) {
      this.rellist = []
      this.startline = 1
      for (let i = 0; i < this.jsondata.relevant.length; i++) {
        let rel = this.jsondata.relevant[i]
        if (name === rel.ui_key) {
          this.onLoad(rel)
        }
      }
    },
    openRelCard (rel, item) {
      if (rel.current_object === 'flowclmx') {
        Toast('流程信息，不能打开详情！')
        return
      }
      let data = { [rel.current_object + '_id']: item.id }
      this.axios({
        method: 'post',
        url: '/api/' + rel.current_object + '.check.do',
        data: qs.stringify(data)
      }).then(res => {
        //console.log(res)
        if (res.data.flag === '1') {
          Toast(res.data.des)
          if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
            this.loginout()
          }
        } else {
          this.reldata = res.data.jsondata
          for (let i = 0; i < this.reldata.Details.length; i++) {
            this.relactiveNames.push(this.reldata.Details[i].groupStitle)
          }
          this.relcardshow = true
        }
      }).catch(res => {
        this.reserror(res)
      })
    }
  },
  activated () {
    if (this.$store.state.ref_show !== '') {
      this.turndoneshow = true
      this.clr_id = this.$store.state.ref_id
      this.clr = this.$store.state.ref_show
    }
    this.$store.commit('clearRef')
  }
}
</script>

<style>
.fieldgroup_title {
  text-align: left;
  margin: 0px;
  padding: 25px 15px 15px;
  color: rgba(69, 90, 100, 0.6);
  font-weight: normal;
  font-size: 14px;
}

.valueleft {
  min-width: 70%;
  white-space: pre-wrap;
  display: inline-block;
  text-align: left;
  word-break: break-all;
}

.cellvalue1 .van-cell__value {
  position: relative;
  overflow: hidden;
  color: #323233;
  text-align: left;
  vertical-align: middle;
  word-wrap: break-word;
  flex: 2
}

.cellvalue1 .van-cell__title {
  color: #999;
}
</style>
